<template>
  <div>
    <h3>5号训练室 - sync</h3>
    <!-- v-model = :value + @input -->
    <!-- $event 是 前面事件的形参，
         原生事件可以拿到事件对象，组件的事件，获取到就是事件参数
    -->
    <hm-numberbox :value="num1" @input="num1 = $event" />
    <hm-numberbox v-model="num1" />

    <!-- 上面的简写固定死只能父传子，传value属性，如果需要传其他属性，也希望能简写
         可以用到 .sync 修饰符

         sync修饰符：将数据的控制权交给了子组件，子组件通过触发对应的事件
         就可以直接修改到父组件的sync绑定变量

         语法步骤：
           1. 绑定变量  :属性名.sync="变量"
           2. 触发传值修改
              this.$emit('update:属性名', 值)
    -->
    <hm-number2 :number="num2" @update:number="num2 = $event" />
    <hm-number2 :number.sync="num2" />

    <peng-button />
    <peng-input />

    <hr>

    <!-- 实际开发中会有很多格式化字符串的需求，比如：日期格式化... -->
    <div>{{ formatTime(str) }}</div>

    <!-- vue2中内置了一个语法，过滤器，本质就是一个函数，可以对字符串，进行格式化处理操作 -->
    <div>{{ str | formatDate }}</div>
  </div>
</template>

<script>
import HmNumberbox from './components/hm-numberbox.vue'
import HmNumber2 from './components/hm-number2.vue'
import moment from 'moment'
export default {
  components: {
    HmNumberbox,
    HmNumber2
  },
  filters: {
    // 一个过滤就是一个函数, 这个函数的返回值就是处理完的结果
    // 过滤器函数的第一个形参，就是要处理的字符串，就是 | 前面的值
    // formatDate(value) {
    //   return moment(value).format('YYYY年MM月DD日')
    // }
  },
  data() {
    return {
      num1: 1,
      num2: 999,
      str: '2022-07-25'
    }
  },
  methods: {
    formatTime(timeStr) {
      return moment(timeStr).format('YYYY年MM月DD日')
    }
  }
}
</script>

<style>

</style>
